<!-- GradientSpreadExample.xaml 
     This example shows the different gradient spread methods applied to 
     linear and radial gradient brushes. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Title="Gradient Spread Methods">
  <Page.Resources>
    <Style x:Key="axisMarkerStyle" TargetType="{x:Type Line}">
      <Setter Property="Line.StrokeThickness" Value="4"/>
      <Setter Property="Line.Stroke" Value="#FF3300"/>
      <Setter Property="Line.StrokeStartLineCap" Value="Flat"/>
      <Setter Property="Line.StrokeEndLineCap" Value="Flat"/>
    </Style>
  </Page.Resources>
  <Grid Margin="10" Background="White">

    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="10" />
      <ColumnDefinition />
      <ColumnDefinition Width="10" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="20" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="20" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="20" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="20" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>




    <!-- Page and table header -->
    <Border  Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="5" 
      Background="{StaticResource blueHorizontalGradientBrush}">
      <TextBlock Style="{StaticResource MyIntroTextBlockStyle}">
        A GradientBrush's SpreadMethod specifies how areas outside of the gradient
        axis are painted. The following are examples of the different SpreadMethod settings.
      </TextBlock>
    </Border>
    
    <Rectangle Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" Fill="DarkGray" StrokeThickness="0" />

    <!-- Labels the different examples. -->
    <TextBlock Grid.Row="2" Grid.Column="0" Margin="10,10,0,10">Spread method</TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="2" Margin="0,10,0,10">Linear gradient</TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="4" Margin="0,10,0,10">Radial gradient</TextBlock>
    <TextBlock Grid.Row="4" Grid.Column="0" Margin="10,0,0,0">Pad</TextBlock>
    <TextBlock Grid.Row="6" Grid.Column="0" Margin="10,0,0,0">Reflect</TextBlock>
    <TextBlock Grid.Row="8" Grid.Column="0" Margin="10,0,0,0">Repeat</TextBlock>

    <!-- The following three examples show the different gradient spread methods
           applied to linear gradient brushes. -->
    <Canvas Grid.Row="4" Grid.Column="2" Width="150" Height="75" Margin="0,0,0,10">
      <Rectangle Width="150" Height="75" Stroke="Black">
        <Rectangle.Fill>

          <!-- Pad -->
          <LinearGradientBrush StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Pad">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#333333" Offset="1" />
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient axis. -->
      <Line X1="45" Y1="40" X2="105" Y2="40" Style="{StaticResource axisMarkerStyle}" />
    </Canvas>
    <Canvas Grid.Row="6" Grid.Column="2" Width="150" Height="75" Margin="0,0,0,10">
      <Rectangle Width="150" Height="75" Stroke="Black">
        <Rectangle.Fill>

          <!-- Reflect -->
          <LinearGradientBrush StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Reflect">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#333333" Offset="1" />
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient axis. -->
      <Line X1="45" Y1="40" X2="105" Y2="40" Style="{StaticResource axisMarkerStyle}" />
    </Canvas>
    <Canvas Grid.Row="8" Grid.Column="2" Width="150" Height="75" Margin="0,0,0,10">
      <Rectangle Width="150" Height="75" Stroke="Black">
        <Rectangle.Fill>

          <!-- Repeat -->
          <LinearGradientBrush StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Repeat">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#333333" Offset="1" />
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient axis. -->
      <Line X1="45" Y1="40" X2="105" Y2="40" Style="{StaticResource axisMarkerStyle}" />
    </Canvas>

    <!-- The following three examples show the different gradient spread methods
           applied to radial gradient brushes. -->
    <Canvas Grid.Row="4" Grid.Column="4" Width="150" Height="75" Margin="0,0,0,10">
      <Rectangle Width="150" Height="75" Stroke="Black">
        <Rectangle.Fill>

          <!-- Pad -->
          <RadialGradientBrush Center="0.5,0.5" RadiusX="0.3" RadiusY="0.3" SpreadMethod="Pad">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#333333" Offset="1" />
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient axis. -->
      <Line X1="75" Y1="15" X2="75" Y2="60" Style="{StaticResource axisMarkerStyle}" StrokeThickness="2" />
      <Line X1="30" Y1="37.5" X2="120" Y2="37.5" Style="{StaticResource axisMarkerStyle}" StrokeThickness="2" />
    </Canvas>
    <Canvas Grid.Row="6" Grid.Column="4" Width="150" Height="75" Margin="0,0,0,10">
      <Rectangle Width="150" Height="75" Stroke="Black">
        <Rectangle.Fill>

          <!-- Reflect -->
          <RadialGradientBrush Center="0.5,0.5" RadiusX="0.3" RadiusY="0.3" SpreadMethod="Reflect">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#333333" Offset="1" />
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient axis. -->
      <Line X1="75" Y1="15" X2="75" Y2="60" Style="{StaticResource axisMarkerStyle}" StrokeThickness="2" />
      <Line X1="30" Y1="37.5" X2="120" Y2="37.5" Style="{StaticResource axisMarkerStyle}" StrokeThickness="2" />
    </Canvas>
    <Canvas Grid.Row="8" Grid.Column="4" Width="150" Height="75" Margin="0,0,0,10">
      <Rectangle Width="150" Height="75" Stroke="Black">
        <Rectangle.Fill>

          <!-- Repeat -->
          <RadialGradientBrush Center="0.5,0.5" RadiusX="0.3" RadiusY="0.3" SpreadMethod="Repeat">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#333333" Offset="1" />
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient axis. -->
      <Line X1="75" Y1="15" X2="75" Y2="60" Style="{StaticResource axisMarkerStyle}" StrokeThickness="2" />
      <Line X1="30" Y1="37.5" X2="120" Y2="37.5" Style="{StaticResource axisMarkerStyle}" StrokeThickness="2" />
    </Canvas>
    <Rectangle Style="{StaticResource footerRectangleStyle}" Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="5" Fill="{StaticResource blueHorizontalGradientBrush}" />
  </Grid>
</Page>
